<template>
  <div class="footer-bg">
    <div class="top">
      <div class="logo">
        <img src="/image/common/footer-logo.png" />
      </div>
      <div class="text-box">
        <div class="text">
          <p>{{language.nav.ServiceHotline}}（09:00-21:00）</p>
          <p>{{ store.footerData.phone }}</p>
        </div>
        <div class="text">
          <p>Email :  {{ store.footerData.email }}</p>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-list" v-for="(item, idx) in navs" :key="idx" @click="goRouter(item.routeName)">
        {{ item?.title }}
      </div>
    </div>
    <div class="icp">{{ store.footerData.icp }}</div>
  </div>
</template>
<style lang="stylus" scoped>
.footer-bg{
  min-width 1080px
  background #000
  color #fff
  .icp{
    padding 10px 25px
    width 1080px
    margin 0 auto
    box-sizing border-box
  }
  .nav{
    width 1020px
    margin 0 auto
    display flex
    border-bottom: 2px solid #FFFFFF;
    .nav-list{
      margin-right 45px
      line-height 40px
      cursor pointer
    }
  }
  .top{
    padding 30px 25px
    width 1080px
    margin 0 auto
    box-sizing border-box
    display flex
    justify-content space-between
  }
  .logo{
    width 215px
    img {
      width 100%
    }
  }
  .text-box{
    display flex
    .text{
      width 230px
      margin-left 10px
      color #fff
      line-height 24px
    }
  }
}
</style>
<script lang="ts" setup>
const router = useRouter();
import { commonStore } from "@/components/store";

import { language } from "~/conf";

const store = commonStore();
const { nav } = language;
const navs = [
  {
    routeName: "index",
    title: nav.Home
  },
  {
    routeName: "process",
    title: nav.Process
  },
  {
    routeName: "products",
    title: nav.Products
  },
  {
    routeName: "about",
    title: nav.About
  }
]
const goRouter = (routeNameString: string) => {
  router.push({ name: routeNameString });
}
</script>
